<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="商品详情" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <van-cell @click="showShare = true" />
        <van-share-sheet v-model="showShare" :options="options" @select="onSelect" />
        <van-icon name="share-o" size="18" />
      </template>
    </van-nav-bar>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :show-indicators="indicators" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img class="item"
          src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1080.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img class="item"
          src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1081.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img class="item"
          src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1082.jpg" alt="">
      </van-swipe-item>
    </van-swipe>

    <!-- 内容区域 -->
    <div class="container">
      <p class="text-y">优惠活动</p>
      <div class="line-icon">
        <p class="text-y">￥<span>3820-6180</span>
        </p>
        <div>券后￥ <span>3520</span>起</div>
      </div>
      <div class="line-text">
        <span class="text-y two">享3期免息,可面80.96元,每期1173元(每日39.11院)</span>
        <span class="three">领券></span>
      </div>
      <p class="text-big">特惠北欧表情皮埃蒙特布艺沙发荷兰ADIASD意大利简约模块组合米色</p>
    </div>

    <!-- 分割线 -->
    <hr style=" height: 10px; background-color: rgba(0, 0, 0, 0.06); border: none;">

    <!-- 选择内容 -->
    <div class="select">
      <div class="select-line">
        <span>选择</span>
        <p>颜色分类/几人坐</p>
        <b></b>
      </div>
      <div class="select-out" @click="$router.push('/address')">
        <div class="line-item">
          <span>选择</span>
          <p>浙江杭州</p>
          <span class="to-right">月销53</span>
          <b></b>
        </div>
        <p class="outline">现货，付款后48小时内发货</p>
        <p class="outline">配送至: 上海 浦东新区</p>
      </div>
      <div class="select-line bottom" @click="a">
        <span>参数</span>
        <p>品牌/型号....</p>
        <b></b>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="hide" :style="`display: ${hide ? 'block' : 'none'} `" @click="a"></div>
    <!-- 产品参数 -->
    <div class=" sum" :style="`display:${hide ? 'block' : 'none'}`" @click="a">
      <b>产品参数</b>
      <div class="sum-line">
        <div>品牌</div>
        <p>Amor</p>
      </div>
      <div class="sum-line">
        <div>型号</div>
        <p>ASD-123</p>
      </div>
      <div class="sum-line">
        <div>材质</div>
        <p>金属</p>
      </div>
      <div class="sum-line">
        <div>金属材质</div>
        <p>铁</p>
      </div>
      <div class="sum-line">
        <div>风格</div>
        <p>北欧</p>
      </div>
      <div class="sum-line">
        <div>流行元素</div>
        <p>大师设计</p>
      </div>
      <button>完成</button>
    </div>

    <!-- 分割线 -->
    <hr style=" height: 10px; background-color: rgba(0, 0, 0, 0.06); border: none;">

    <!-- 宝贝评价 -->
    <div class="content" @click="$router.push('/evaluate')">
      <b>宝贝评价（100+）</b>
      <div class="user">
        <div class="user-item">
          <img src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1071.png" alt="">
          <div class="user-text">
            <p>Amor</p>
            <span>1天前</span>
          </div>
        </div>
        <div class="text">
          手感不错，支撑力好，睡着页舒服手感不错，支撑力好，睡着页舒服
        </div>
      </div>
      <div class="user">
        <div class="user-item">
          <img src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1071.png" alt="">
          <div class="user-text">
            <p>Amor</p>
            <span>1天前</span>
          </div>
        </div>
        <div class="text">
          手感不错，支撑力好，睡着页舒服手感不错，支撑力好，睡着页舒服
        </div>
      </div>
    </div>
    <div class="baby">宝贝详情</div>

    <!-- 图片预览 -->
    <img class="line-img"
      src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1080.jpg" alt="">
    <img class="line-img"
      src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1081.jpg" alt="">
    <img class="line-img"
      src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1082.jpg" alt="">

    <div style="height: 50px;"></div>
    <!-- 底部购买框 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="$router.push('/home/carts')" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 遮罩层
      hide: false,
      // 分享面板
      showShare: false,
      options: [
        { icon: 'wechat' },
        { icon: 'wechat-moments' },
        { icon: 'weibo' },
        { icon: 'qq' },
      ],
      indicators: false // 清除轮播图指示器
    };
  },
  mounted() {
    window.scrollTo(0, 0)
  },
  methods: {
    // 分享面板
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    a() {
      this.hide = !this.hide
    }
  },
}
</script>

<style lang="scss" scoped>
// 遮罩层
.hide {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
  display: none;
}

// 产品参数
.sum {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  z-index: 10;
  border-radius: 30px 30px 0 0;
  padding: 30px;
  box-sizing: border-box;

  b {
    display: block;
    font-size: 18px;
    margin-bottom: 30px;
  }

  .sum-line {
    margin-top: 20px;
    display: flex;
    align-items: center;

    div {
      width: 80px;
      font-size: 14px;
      color: gray;
    }

    p {
      color: #333;
    }
  }

  button {
    width: 100%;
    margin-top: 30px;
    border: none;
    background-color: rgba(248, 222, 75, 1);
    line-height: 40px;
    border-radius: 20px;
  }
}

.container {
  padding: 20px 20px;

  .line-icon {
    display: flex;
    align-items: center;
    margin: 5px 0;

    div {
      padding: 5px 15px;
      background-color: orangered;
      color: white;
      border-radius: 20px;

      span {
        font-size: 24px;
      }
    }
  }

  .line-text {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .two {
      font-size: 13px;
    }

    .three {
      font-size: 14px;
    }
  }

  .text-y {
    font-size: 14px;
    color: orangered;

    span {
      font-size: 24px;
      font-weight: 500;
      margin-right: 10px;
    }
  }

  .text-big {
    font-weight: 600;
    margin: 10px 0 0 0;
  }
}

// 选择模块
.select {
  padding: 20px 20px;
  color: #333;

  .select-line {
    display: flex;
    align-items: center;

    span {
      color: gray;
    }

    p {
      flex: 1;
      margin-left: 25px;
    }

    b {
      width: 10px;
      height: 10px;
      border-top: 2px solid black;
      border-right: 2px solid black;
      transform: rotate(45deg);
    }
  }

  .select-out {
    margin: 10px 0;

    .line-item {
      display: flex;
      align-items: center;

      span {
        color: gray;
      }

      p {
        flex: 1;
        margin-left: 25px;
      }

      b {
        width: 10px;
        height: 10px;
        border-top: 2px solid black;
        border-right: 2px solid black;
        transform: rotate(45deg);
      }

      .to-right {
        margin-right: 10px;
      }
    }

    .outline {
      margin-left: 57px;
      margin-top: 10px;
    }
  }
}

// 宝贝评价
.content {
  padding: 20px 20px;

  b {
    font-size: 18px;
  }

  .user {
    margin-top: 20px;

    .user-item {
      display: flex;

      img {
        margin-right: 10px;
      }

      .user-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        span {
          color: gray;
          font-size: 14px;
        }
      }
    }

    .text {
      margin-top: 10px;
    }

  }

}

.baby {
  text-align: center;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.1);
}

.line-img {
  width: 100%;
}
</style>

<style>
.van-share-sheet__options {
  padding: 30px;
}

.my-swipe {
  width: 100%;
  height: 375px;

  .item {
    width: 100%;
    object-fit: cover;
  }
}
</style>